<template>
  <div class="game-lobby">
    <!-- 背景特效 -->
    <div class="particles-background"></div>

    <!-- 移动端菜单按钮 -->
    <el-button :icon="iconMenu" @click="toggleSidePanels" class="mobile-menu-btn" v-if="isMobile"></el-button>

    <!-- 主网格布局 -->
    <div class="grid-container">
      <!-- 用户信息区域 -->
      <div class="user-panel">
        <UserProfile />
      </div>

      <!-- 房间玩家列表区域 -->
      <div class="players-panel">
        <div class="panel-header">
          <div class="header-left">
            <h2 class="room-title">
              <i class="icon-door"></i>
              当前房间玩家
            </h2>
            <div class="room-info-display">
              <div class="room-id-card">
                <span class="room-id-label">房间ID:</span>
                <span class="room-id-value">{{ roomIdFromRoute }}</span>
                <button
                    @click="copyRoomId"
                    class="btn-copy"
                    title="复制房间号"
                >
                  <i class="icon-copy"></i>
                </button>
              </div>
              <div class="player-count-badge">
                <i class="icon-user-group"></i>
                {{ players.length }}/{{ maxPlayers }}
              </div>
            </div>
          </div>
          <div class="header-right">
            <div class="connection-status" :class="{ connected: isConnected }">
              <span class="status-dot"></span>
              {{ isConnected ? '已连接' : '连接中...' }}
            </div>
          </div>
        </div>

        <div class="players-list">
          <PlayerCard
              v-for="player in players"
              :key="player.id"
              :player="player"
              :is-current-user="player.id === currentUserId"
              :is-host="player.id === hostId"
              v-if="cardVisible"
          />
        </div>

        <div class="room-actions">
          <button
              v-if="isHost"
              @click="startGameClk"
              class="btn-start"
          >
            开始游戏
          </button>
          <button
              @click="leaveRoom"
              class="btn-leave"
          >
            离开房间
          </button>
        </div>
      </div>

      <!-- 聊天区域 -->
      <div class="chat-panel" :class="{'mobile-visible': showSidePanels}">
        <ChatWindow />
      </div>

      <!-- 排行榜区域 -->
<!--      <div class="leaderboard-panel" :class="{'mobile-visible': showSidePanels}">-->
<!--        <Leaderboard />-->
<!--      </div>-->
    </div>

<!--    &lt;!&ndash; 遮罩层 &ndash;&gt;-->
<!--    <div class="mobile-overlay"-->
<!--         v-if="isMobile && showSidePanels"-->
<!--         @click="toggleSidePanels"></div>-->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from "vue-router"
import UserProfile from '../UserProfile.vue'
import ChatWindow from '../ChatWindow.vue'
import Leaderboard from '../Leaderboard.vue'
import PlayerCard from '../PlayerCard.vue'
import { useRoom } from '../../composables/useRoom'
import { useUserStore } from "@/stores/user.js"
import { ElMessage } from "element-plus"
import { copyText } from 'vue3-clipboard'
import {Menu} from "@element-plus/icons-vue";

const route = useRoute()
const showSidePanels = ref(false)
const windowWidth = ref(window.innerWidth)
const iconMenu = Menu

const {
  roomId,
  players,
  maxPlayers,
  minPlayers,
  hostId,
  currentUserId,
  startGame,
  leaveRoom,
  refreshRoom
} = useRoom()

const isConnected = ref(false)
const roomIdFromRoute = computed(() => route.params.roomId)
const cardVisible = ref(true)
const isMobile = computed(() => windowWidth.value < 1024) // 调整断点为1024px

const toggleSidePanels = () => {
  showSidePanels.value = !showSidePanels.value
}

const copyRoomId = () => {
  copyText(roomIdFromRoute.value, undefined, (error) => {
    if (error) {
      ElMessage.error(`复制失败: ${error} ！`)
    } else {
      ElMessage.success(`已复制房间号: ${roomIdFromRoute.value}`)
    }
  })
}

const startGameClk = () => {
  if (players.value.length < minPlayers.value) {
    ElMessage.error('至少需要'+ minPlayers.value +'名玩家才能开始游戏！')
    return
  }
  startGame()
}

const isHost = computed(() => {
  const currentUserId = useUserStore().userId
  return players.value.some(player =>
      player.id === currentUserId && player.status === "host"
  )
})

const refreshPlayerList = () => {
  cardVisible.value = false
  nextTick(() => {
    cardVisible.value = true
  })
}

const handleResize = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  isConnected.value = false
  refreshRoom(roomIdFromRoute.value)
  isConnected.value = true
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 您原有的所有样式保持不变 */
.game-lobby {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  opacity: 0.3;
}

.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "user players chat"
    "leaderboard players chat";
  gap: 20px;
  padding: 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.user-panel {
  grid-area: user;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.players-panel {
  grid-area: players;
  background: rgba(22, 33, 62, 0.7);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(76, 201, 240, 0.1);
  border: 1px solid rgba(76, 201, 240, 0.2);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.room-title {
  margin: 0;
  font-size: 1.5rem;
  color: #4cc9f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-door {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234cc9f0"><path d="M12 3c-4.963 0-9 4.038-9 9v6h2v-6c0-3.859 3.141-7 7-7s7 3.141 7 7v6h2v-6c0-4.962-4.037-9-9-9zm-1 12h2v-2h-2v2z"/></svg>') no-repeat center;
}

.room-info-display {
  display: flex;
  align-items: center;
  gap: 15px;
}

.room-id-card {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(76, 201, 240, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.room-id-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 8px;
}

.room-id-value {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #4cc9f0;
  margin-right: 10px;
}

.btn-copy {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.btn-copy:hover {
  opacity: 1;
  transform: scale(1.1);
}

.icon-copy {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234cc9f0"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') no-repeat center;
}

.player-count-badge {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(106, 17, 203, 0.2);
  border-radius: 20px;
  font-size: 0.9rem;
  gap: 6px;
}

.icon-user-group {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 5.5c-1.079 0-2.015.675-2.425 1.641-.15.344-.575.462-.888.272-.344-.15-.462-.575-.272-.888C8.968 5.119 10.388 4.5 12 4.5c1.612 0 3.032.619 4.083 1.725.19.313.072.738-.272.888-.313.19-.738.072-.888-.272C14.015 6.175 13.079 5.5 12 5.5zm7.5 3.75c0-.825-.675-1.5-1.5-1.5-.394 0-.75.15-1.013.394-.272.244-.487.619-.487 1.106 0 .825.675 1.5 1.5 1.5s1.5-.675 1.5-1.5zM6 9.25c0-.825-.675-1.5-1.5-1.5S3 8.425 3 9.25s.675 1.5 1.5 1.5S6 10.075 6 9.25zm15 2.25v1.5c0 3.037-2.55 5.625-5.625 5.625-.75 0-1.5-.188-2.175-.469-.6-.244-1.35-.244-1.95 0-.675.281-1.425.469-2.175.469C5.55 18.625 3 16.037 3 13v-1.5c0-.825.675-1.5 1.5-1.5h3.75c.394 0 .75.15 1.013.394.272.244.487.619.487 1.106v.75c0 .619.431 1.125 1.05 1.125h3.3c.619 0 1.05-.506 1.05-1.125v-.75c0-.487.215-.862.487-1.106.263-.244.619-.394 1.013-.394h3.75c.825 0 1.5.675 1.5 1.5z"/></svg>') no-repeat center;
}

.connection-status {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  gap: 6px;
}

.connection-status.connected {
  background: rgba(76, 201, 240, 0.2);
  color: #4cc9f0;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
}

.connection-status.connected .status-dot {
  background: #4cc9f0;
  box-shadow: 0 0 8px #4cc9f0;
}

.players-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 10px;
  overflow-y: auto;
}

.room-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-start, .btn-leave {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-start {
  background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 17, 203, 0.4);
}

.btn-leave {
  background: rgba(255, 255, 255, 0.1);
  color: #ff6b6b;
}

.btn-leave:hover {
  background: rgba(255, 107, 107, 0.2);
}

.chat-panel {
  grid-area: chat;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.leaderboard-panel {
  grid-area: leaderboard;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 新增的移动端响应式样式 */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "players";
    padding: 15px;
    gap: 15px;
  }

  .user-panel,
  .chat-panel,
  .leaderboard-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .user-panel.mobile-visible {
    transform: translateX(0);
    left: 0;
  }

  .chat-panel.mobile-visible {
    transform: translateX(0);
    right: 0;
  }

  .leaderboard-panel.mobile-visible {
    transform: translateX(0);
    right: 0;
  }

  .mobile-menu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 30;
    background: rgba(26, 26, 46, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 15;
  }
}

/* 更小的屏幕调整 */
@media (max-width: 768px) {
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .players-list {
    grid-template-columns: 1fr;
  }
}
</style>
